<template>
  <div class="container">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">商品分类列表</h3>
      </div>
      <div class="panel-body">
        <button class="btn btn-primary btn-md" @click="addOne">新增</button>
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th>序号</th>
              <th>名字</th>
              <th>简介</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(p,index) in list" :key="p._id">
              <td>{{index+1}}</td>
              <td>{{p.name}}</td>
              <td>{{p.descriptions}}</td>
              <td>
                <button class="btn btn-warning btn-sm" @click="editOne(p)">修改</button>
                <button class="btn btn-danger btn-sm">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="pop" v-show="isShow">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
              @click="closePop"
            >&times;</button>
            <h4 class="modal-title">编辑页</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label for>名字</label>
              <input
                type="text"
                class="form-control"
                placeholder="请输入名字"
                v-model="currentData.name"
              >
            </div>
            <div class="form-group">
              <label for>简介</label>
              <textarea
                row="8"
                class="form-control"
                placeholder="请输入简介"
                v-model="currentData.descriptions"
              ></textarea>
            </div>
            <button @click="saveHandle" class="btn btn-primary btn-block">保存</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//使用第三方插件axios,不写路径的时候默认是node_modules路径
import axios from "axios";
export default {
  data() {
    return {
      isShow: false, //是否显示弹窗
      token: "", //token令牌
      list: [], //列表
      // 弹窗中的数据
      currentData: {
        name: "",
        descriptions: "",
        id: "" //当前项目的id
      },
      isEdit: false //是否修改操作
    };
  },
  methods: {
    closePop() {
      this.isShow = false;
    },
    showPop() {
      this.isShow = true;
    },
    // 弹窗中的保存按钮
    saveHandle() {
      if (this.currentData.name) {
        if (this.isEdit) {
          axios
            .put(
              "http://api.cat-shop.penkuoer.com/api/v1/admin/product_categories/" +
                this.currentData.id,
              {
                name: this.currentDate.name,
                descriptions: this.currentData.descriptions
              },
              {
                headers: {
                  authorization: "bearer" + this.token
                }
              }
            )
            .then(res => {
              console.log(res);
              this.closePop(); //关闭弹窗
              this.loadData(); //重新加载数据
            });
        } else {
          axios
            .post(
              "http://api.cat-shop.penkuoer.com/api/v1/admin/product_categories",
              {
                name: this.currentData.name,
                descriptions: this.currentData.descriptions
              },
              {
                headers: {
                  authorization: "bearer" + this.token
                }
              }
            )
            .then(res => {
              console.log(res);
              this.closePop(); //关闭弹窗
              this.loadData(); //重新加载数据
            });
        }
      } else {
        alert("请输入名字");
      }
    },
    // 新增
    addOne() {
      this.isEdit = false;
      this.currentData.id = "";
      this.currentData.name = "";
      this.currentData.descriptions = "";
      this.showPop();
    },
    editOne(item) {
      this.isEdit = true;
      this.showPop();
      this.currentData.name = item.name;
      this.currentData.descriptions = item.descriptions;
      this.currentData.id = item._id;
    },
    // 从服务器中加载数据
    loadData() {
      axios
        .get(
          "http://api.cat-shop.penkuoer.com/api/v1/admin/product_categories",
          {
            headers: {
              authorization: "bearer " + this.token
            }
          }
        )
        .then(res => {
          this.list = res.data.categories; //赋值数据
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    // 组件加载完成之后进行登录，获取token
    axios
      .post("http://api.cat-shop.penkuoer.com/api/v1/auth/manager_login", {
        userName: "admin",
        password: "admin@12138"
      })
      .then(res => {
        this.token = res.data.token; //把token存在data中
        this.loadData(); //加载数据
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style scoped>
/* scoped表示只有在当前组件内有效 */
.pop {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(30, 30, 30, 0.3);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

